<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片库示例</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
	<li><a href="images/IMG_20120410_183943.jpg" title="A firewoks display" onclick="showPicture(this); return false">Fireworks</a></li>
	<li><a href="images/IMG_20120418_154212.jpg" title="A cup of black coffee" onclick="showPicture(this); return false">Coffee</a></li>
	<li><a href="images/IMG_20120528_140902.jpg" title="A red rose" onclick="showPicture(this); return false">Rose</a></li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/>
<p id="description">请选择图片</p>
//下面是调用JavaScript打开新窗口的伪协议示例
<a href="javascript:popUp('http://yanenglish.test/web');">伪协议调用JavaScript示例</a>
<script>
    /**
     * 拦载a元素的click方法
     * @param whichPic 元素节点
     */
    function showPicture(whichPic) {
        //取得图片节点链接
        var source = whichPic.getAttribute('href');
        //取得待显示图片的占位符节点
        var placeholder = document.getElementById('placeholder');
        //修改占位符节点的图片链接
        placeholder.setAttribute('src', source);        //也可以不声明placeholder变量，直接用以下的非DOM方式直接引用元素来修改值，这样浏览器兼容性好点，但是使用DOM的好处是可以用于多种语言环境。	placeholder.src = source;

        var text = whichPic.getAttribute('title');
        var description = document.getElementById('description');
        description.firstChild.nodeValue = text;

    }

    function countBodyChildren() {
        var bodyElement = document.getElementsByTagName('body')[0];	//因为只有一个body节点，所以用返回数组的第一个元素来表示，注意这种写法，直接在方法后面加了数组下标
//        alert(bodyElement.childNodes.length);
        alert(bodyElement.nodeType);	//获得节点的类型，1-元素节点，2-属性节点，3-文本节点
	}

	function popUp(URL) {
        window.open(URL, 'popup', 'width=320, height=480');
	}
	window.onload = countBodyChildren;	//这一行指定在浏览器加载网页后执行
</script>
</body>
</html>